<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<link href="css/font-awesome.min.css" rel="stylesheet">
	<link rel="stylesheet" href="css/bootstrap.css">
	<link rel="stylesheet" href="wb/css/mui.min.css">
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/index.css">
	<title>修改手机号</title>
	<style>
		body{
			background: #f3f3f3;
		}
	</style>
</head>
<body>
	<header class="myheader-words">
		<a href="javascript:void(0)" onclick="javascript:history.go(-1)" class="myleft"><i class=" glyphicon glyphicon-menu-left"></i>返回</a>
		<h3>修改手机号</h3>
		<span class="myicon glyphicon glyphicon-option-horizontal" aria-hidden="true"></span>
	</header>
	<div class="container">
		<div class="mui-input-row myphone-edit">
			<form class="mui-input-group">
			    <div class="mui-input-row">
			        <label>手机号</label>
			    	<input type="text" class="mui-input-clear" placeholder="请输入手机号">
			    </div>
			    <div class="mui-input-row">
			        <label>验证码</label>
			        <input type="text" class="" placeholder="输入6位验证码">
			        <button type="button" class="getCode">获取验证码</button>
			    </div>
				<span class="mynick_words">请输入11位手机号码</span>
				<button type="button" class="myinfo-sure">确定更改</button>
			</form>
		</div>

	</div>
</body>
<script src="js/jquery.js"></script>
<script>
	$('.getCode').on('click',function(){
		var oldTime = 60;
		$('.getCode').text(oldTime + 's后再次获取');
		$('.getCode').attr('disabled',true);
		var mytimer = setInterval(function(){
			oldTime --;
			myTime(oldTime,mytimer);
		},1000);
	})

	function myTime(time,timer){
		if (time >= 0) {
			$('.getCode').text(time+'s后再次获取');
		}else{
			clearInterval(timer);
			$('.getCode').text('获取验证码');
			$('.getCode').attr('disabled',false);
		}
	}
</script>
</html>